<template>
  <div>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="50%" @close="closeOpen">
      <el-table :data="dataList" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="label" label="项目" width="180">
          <template slot-scope="scope">
            <div >
              {{ scope.row.label | lookNames  }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="详情" >
          <template slot-scope="scope">
            <el-image v-if="/\.(png|jpg)$/.test(scope.row.value)" style="width: 150px;height:50px"
             :preview-src-list="[$http.staticURL+scope.row.value]"
             :src="$http.staticURL+scope.row.value" fit="fill" />
            <div v-else>{{ scope.row.value }}</div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="dialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      dialogVisible: false
    }
  },
  methods: {
    init(val) {
      console.log(val,789);
      this.dialogVisible = true
      for (const key in val) {
        let obj={}
        if(key==='state'){
          obj.label = key
          obj.value = this.$state[val[key]]
        }else if(key==='role'){
          obj.label = key
          obj.value = this.$role[val[key]]
        }else{
          obj.label = key
          obj.value = val[key]
        }
        if(['level','del'].indexOf(key)<0){
          this.dataList.push(obj)
        }
        
      }
    },
    closeOpen() {
      this.dialogVisible = false
      this.dataList = []
    }
  },
  filters: {
    lookNames(val){
      let obj={
        id:'编号：',
        name:'角色名称：',
        service_area:'服务范围：',
        card_img1:'身份证照片（正）：',
        card_img2:'身份证照片（反）：',
        tel:'手机号：',
        img:'营业执照：',
        createtime:'创建时间：',
        updatetime:'更新时间：',
        pwd:'密码：',
        // level:'设计师等级：',
        // del:'删除：',
        area:'供应商地址：',
        email:'邮箱：',
        bank:'开户行：',
        account_name:'开户名：',
        card:'开户账号：',
        paid:'待结款：',
        state:'状态：',
        role:'角色：',
        createdate:'创建时间：',
        updatedate:'更新时间：'
      }
      if(obj[val]){
        return obj[val]
      }else{
        return 0
      }
    }
  }

}
</script>
<style lang='less' scoped>
  .left{
    text-align: right;
  }
  .right{
    text-align: left;
  }
  .lookinfo{
    width: 100%;
    padding: 10px;
  }
</style>
